<template>
  <div class="canvascont">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="4" :lg="4" class="hidden-xs-only">
        <div class="left">
          <!-- 输入框 -->
          <el-input
            class="search"
            placeholder="请搜索楼层"
            suffix-icon="el-input__icon el-icon-search"
            v-model="input1"
            clearable
            size="small"
          ></el-input>
          <!-- :show-checkbox="true" 节点选择 -->
          <!-- :default-checked-keys="defaultTree" -->
          <!-- default-expand-all 默认展开所有节点 -->
          <!-- 默认展开需要设置唯一值node-key="id" -->
          <!-- node-click 节点被点击的回调 -->
          <!-- accordion  是否每次只打开一个同级树节点展开-->
          <!-- highlight-current 默认选中高亮-->
          <!-- 树型控件 -->
          <el-tree
            class
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            ref="menuTree"
            node-key="id"
            accordion
            :default-expanded-keys="[1, 1, 1]"
            :filter-node-method="filterNode"
          ></el-tree>
        </div>
      </el-col>
      <el-col :xs="24" :sm="15" :lg="15">
        <div class="right">
          <div class="top">
            <i></i>
            <p>请上传楼层图片</p>
          </div>
          <!-- 删除按钮 -->
          <el-button
            type="text"
            @click="deletey"
            icon="el-icon-close"
            style="float: right; margin-right: 15px"
            v-show="!this.vessel"
            >删除平面图</el-button
          >
          <!-- 上传组件 -->
          <div class="alert-box-item">
            <!-- 上传 -->
            <div class="bigImg-div" @click="toGetImg">
              <!-- 上传图标 -->
              <i class="el-icon-plus"></i>
            </div>
            <!-- 文字描述 -->
            <div class="txt">
              *上传地图文件支持<i>png,jpg.jpeg</i>,
              最小分辨率<i>500px*500px</i>, 图片最大上传不超过<i>10M</i>
            </div>
          </div>
          <!-- 图片展示 -->
          <img class="bigImg" id="bigImg" :src="valueUrl" v-show="valueUrl" />
          <!-- 画布操作 -->
          <div class="cass" v-show="this.vessel" id="cas">
            <div class="operation">
              <div class="zuo">
                请拖动图标到安装位置-<i
                  >{{ this.floorna }}{{ this.whichfl }}平面图</i
                >
              </div>
              <div class="you">
                <!-- <i class="el-icon-zoom-in" @click="amplifier"></i>
                <i class="el-icon-zoom-out" @click="shrink"></i> -->
                <el-button
                  type="text"
                  icon="el-icon-folder-checked"
                  @click="amplifier"
                  >保存点位</el-button
                >
                <el-button type="text" icon="el-icon-delete" @click="eliminate"
                  >清除配置</el-button
                >
              </div>
            </div>
            <canvas
              ref="canvas"
              id="canvas"
              width="970px"
              height="500px"
              @mousedown="canvasMouseDown"
              @mousemove="canvasMouseMove"
              @mouseup="canvasMouseUp"
              @mousewheel="canvasMouseWhell"
            ></canvas>
            <!-- @mouseout="canvasMouseoUt" -->
            <!-- <img src="./传感器.png" id="imgs" style="display: none" /> -->
          </div>
          <!-- 保存按钮 -->
          <div class="bottom" v-if="!this.vessel">
            <el-button type="primary" @click="save">保存</el-button>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="5" :lg="5">
        <div class="table">
          <div class="top">
            <i></i>
            <p>楼层点位信息</p>
          </div>
          <!-- 数据展示 -->
          <el-table
            :data="tableData"
            height="400"
            border
            style="width: 100%"
            size="mini"
            @row-click="handleClick"
          >
            <!-- <el-table-column label="添加点位" align="center" width="120">
              <template v-slot="{ row }">
                <el-button @click="handleClick(row.id)" size="mini" type="success"
                  >添加点位</el-button
                >
              </template>
            </el-table-column> -->
            <el-table-column
              prop="deviceName"
              label="图标"
              align="center"
              width="80"
            >
              <template>
                <el-image
                  style="width: 40px; height: 40px; margin: -2px"
                  :src="this.xue"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column
              prop="sensorName"
              label="传感器名称"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="sensorSerial"
              label="传感器编号"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="sensorType"
              label="传感器类型"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="position"
              label="详细位置"
              align="center"
              width="200"
            >
            </el-table-column>
          </el-table>
          <!-- 添加点位按钮 -->
          <el-button type="primary" @click="addPT">添加点位</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 上传组件
let inputElement = null
export default {
  name: 'CanvasPt',
  data() {
    return {
      // 笔记本开关
      windowlen: false,
      // 监听是否在笔记本上
      screenWidth: document.body.clientWidth,
      // 搜索框值
      input1: '',
      // 树形结构
      // 树形数据
      data: [],
      // 树形数据分析
      defaultProps: {
        id: 'id',
        label: 'name',
        children: 'children'
      },
      // 保存点位
      page: {
        // 楼层id
        floorId: 1,
        // 保存移动的点位数据
        backgroundImgs: '',
        // 背景图片
        canvasSensorImg: '',
        // 控制传感器显示
        sensorImgs: ''
      },
      // 所属楼名称
      floorna: '',
      // 所属楼层名称
      whichfl: '',
      // 上传图片保存位置
      valueUrl: '',
      // 图标
      xue: '',
      // 画布
      canvasWidth: 970, // 画布大小
      canvasHeight: 500,
      // 画布开关，添加按钮开光
      vessel: false,
      // 获取canvas标签
      canvas: null,
      // 创建画布
      ctx: null,
      //定时器
      intervalId: null,
      //判断鼠标是否点击
      isClick: false,
      //记录需要移动的图片的开光
      index: -1,
      //画布渲染帧数
      frameNumber: 20,
      //背景缩放比例
      imgScale: 1.0,
      //背景拖动速度
      imgMove: 20,
      //图标数据
      tableimg:
        'image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAAxlBMVEUAAAAAAAD2/f/v+v////8AAAD9//8BAQEAAAAAAAD9/f0AAAAAAAAAAADv7+8ODg4lJSUAAADk5OTw8PDf39/q6uq2tracnJzKysoAAAAAAADz8/Pz8/MxMTG6urq8vLwXFxc8PDwaGhoAAABOTk5SUlL29vY7xf////9t1P9Gyf/s+v9SzP/T8v+a4f921//o+P+M3f/i9//J7//3/f+t5/+n5f+E2/9Wzf9My/9x1f9Bx//a9P++7P+06f+T3/9h0f+e4/+/akeeAAAAJ3RSTlMACvH82hLoYy0YvSkhRJ49NTSdlZKLgIBzWSSwm21ramZZWFRFQa2KNeMUAAAByUlEQVQ4y4WU55KjMBCET4lgwDlvTidLBGOMMdib7v1f6sTYPgGL67qKH4iv1C1mRr/qQiD9/uOz7TqWkuParRhiy/7DqEMNg3ZG9/0lQz8I921CMSa+EsGYTl7dBsOcOcUkjEQgZSCikGA6t1iN6N8aZCv4P4ktMbo9ViV+43jDa9rE+EYzyLnFieANiQR3B+iSdG7EmtBMbEytE8PeKNEuVS9Cn2zYZDnBW7WwW9W0U0tbPAYr1KektFk1VFoR+lwmth9wyNt34SGeOQpxRzgC66Os6AhLER72kDpxB3yaTpKDU+dFIRb1g2tI4FOzRAxfnpH1Wj+wJn3DZDVEwuOraIXgGtFGyRmRcp9FB34xYpW4GRgc+CZ9//zwE3GKa6LKoYO0jLn+E4t8vy6+UgGHXijEvschB+1LpAjzz1WYpPvDDn6dh3QBSkbtk/MsDL5z4R+gAI+WLiMoyJIv/h28p6tdXkAZTSg1e200g8iOxccRmuHOQ/9rqYV9bjure6UxTWgXsOrdtLa3CTYXptsyJKbHqoM0mDZHbaqJS56ncXVgx3cLyFFj7MHzbHga++Hs0fTs1rvB6b2YpRaeZaOrVwxijDUuob8Yc2xVH/bg/QAAAABJRU5ErkJggg==',
      //图标
      sensorImgList: [
        // { url: require('./传感器.png'), x: 0, y: 0, width: 46, height: 46 }
      ],
      //画布背景图
      backgroundImg: {
        url: '',
        x: 0,
        y: 0,
        width: 970,
        height: 500
      },
      //传感器在背景中的图片
      canvasSensorImg: [],
      tableData: [
        // {
        //   deviceName:
        //     '',
        //   sensorName: '一楼传感器',
        //   sensorSerial: 'K254681369',
        //   equipmentSensorType: '无线',
        //   position: '会议室旁边'
        // }
      ],
      // 控制标记过的传感器显示
      sensorshow: []
    }
  },
  watch: {
    input1(val) {
      this.$refs.menuTree.filter(val)
    },
    screenWidth: {
      immediate: true,
      handler: function (newVal) {
        console.log('浏览器大小', newVal)
        if (newVal != 1920) {
          console.log('执行了', newVal != 1980)
          this.windowlen = true
        }
      }
    }
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      }
    }
  },
  beforeDestroy() {
    // 上传组件销毁
    if (inputElement) {
      if (window.addEventListener) {
        inputElement.removeEventListener('change', this.onGetLocalFile, false)
      } else {
        inputElement.detachEvent('onchange', this.onGetLocalFile)
      }
      document.body.removeChild(inputElement)
      inputElement = null
      // //console.log("========inputelement destroy");
    }
    // 在页面销毁后，清除计时器
    clearInterval(this.intervalId) //清除计时器
    this.intervalId = null //设置为null

    // 离开页面是清空
    this.windowlen = false
  },
  created() {
    // 获取目录数据
    // this.catalogue()
    // 获取楼层数据
    this.floorpt()
    // 获取点位信息
    this.sensordata()
  },
  methods: {
    // 生成上传组件
    toGetImg() {
      if (inputElement === null) {
        // 生成文件上传的控件
        inputElement = document.createElement('input')
        inputElement.setAttribute('type', 'file')
        inputElement.style.display = 'none'
        if (window.addEventListener) {
          inputElement.addEventListener('change', this.uploadFile, false)
        } else {
          inputElement.attachEvent('onchange', this.uploadFile)
        }
        document.body.appendChild(inputElement)
      }
      inputElement.click()
      this.$message.success('请先选择楼层！')
    },
    // 上传获取图片
    uploadFile(el) {
      if (el && el.target && el.target.files && el.target.files.length > 0) {
        // //console.log(el);
        const files = el.target.files[0]
        const isLt2M = files.size / 1024 / 1024 < 10
        const size = files.size / 1024 / 1024
        const imagetype = ['image/png', 'image/jpg', 'image/jpeg']
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 10MB!')
        } else if (!imagetype.includes(files.type)) {
          this.$message.error('请选择正确的图片格式文件')
        } else {
          const that = this
          const reader = new FileReader() // 创建读取文件对象
          reader.readAsDataURL(el.target.files[0]) // 发起异步请求，读取文件
          reader.onload = function () {
            // 文件读取完成后
            // 读取完成后，将结果赋值给img的src
            console.log(this.result)
            that.valueUrl = this.result
          }
        }
      }
    },
    // 树形结构点击事件
    handleNodeClick(data) {
      if (data.children != null) {
        return
      }
      console.log('树形结构', data)
      console.log(data.id)
      // 楼层id
      this.page.floorId = data.id
      // 查询楼层点位
      this.floorpt()
      this.sensordata()
    },
    // 树节点搜索
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 获取目录
    async catalogue() {
      //   const res = await instcatalogue()
      //   console.log('目录', res.data)
      //   this.data = res.data
    },
    // 获取楼层点位图
    async floorpt() {
      //   const res = await instdeleteType(this.page.floorId)
      //   console.log('查询数据', res)
      //   !res.data
      if (true) {
        this.vessel = false
        this.$message.success('当前楼层没有数据')
      } else {
        // 楼层数据
        this.floorna = res.data.blockName
        this.whichfl = res.data.floorName
        this.backgroundImg = JSON.parse(res.data.canvasSensorImg)
        this.canvasSensorImg = JSON.parse(res.data.backgroundImgs)
        this.vessel = true
        console.log(JSON.parse(res.data.canvasSensorImg))
        console.log(JSON.parse(res.data.backgroundImgs))
        this.init()
        // this.loadSensorImg()
        this.$message.success('查询数据成功')
      }
    },
    // 传感器数据
    async sensordata() {
      //   const res = await instsensor(this.page.floorId)
      //   console.log('传感器数据', res)
      //   this.tableData = res.data
      // this.tableData = [
      //   {
      //     id: 2,
      //     deviceName: this.xue,
      //     sensorName: '二楼传感器',
      //     sensorSerial: 'K254681369',
      //     equipmentSensorType: '无线',
      //     position: '会议室旁边'
      //   }
      // ]
    },
    // 删除图片
    deletey() {
      this.valueUrl = ''
    },
    // 保存
    save() {
      // //console.log(this.valueUrl);
      if (this.valueUrl) {
        // 图片复制
        this.backgroundImg.url = this.valueUrl
        this.vessel = true
        this.init()
        this.$message.success('上传图片成功，请稍后')
      } else {
        this.$message.error('请先选择图片，在保存!')
      }
    },
    // 清除配置
    eliminate() {
      this.$confirm(
        '清除配置后，平面图和位置信息会同时被清除, 是否清除?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.canvasSensorImg = []
          // 删除接口
          this.valueUrl = ''
          //   this.insteqdelete()
          // 清空定时器 关闭画布
          clearInterval(this.intervalId) //清除计时器
          this.intervalId = null //设置为null
          this.vessel = false
          this.$message.success('清除点位成功!')
          this.sensordata()
        })
        .catch(() => {})
    },
    // 删除点位
    // async insteqdelete() {
    //   await insteqdelete(this.page.floorId)
    //   //console.log("删除了");
    // },
    // 保存点位
    async amplifier() {
      this.backgroundImg.url = this.valueUrl
      this.page.backgroundImgs = JSON.stringify(this.canvasSensorImg)
      this.page.canvasSensorImg = JSON.stringify(this.backgroundImg)
      this.page.sensorImgs = JSON.stringify(this.sensorshow)
      console.log(this.canvasSensorImg)
      console.log(this.page.canvasSensorImg)
      // 发请求
      console.log(this.canvasSensorImg)
      console.log('点位信息', this.page)
      //   const res = await instcreateType(this.page)
      //   this.$message.success('保存点位成功')
      this.valueUrl = ''
    },
    // 创建画布
    init() {
      // 找到画布标签
      this.canvas = this.$refs.canvas
      // 判断笔记本上运行
      if (this.windowlen) {
        console.log('笔记本浏览', this.windowlen)
        this.canvas.width = 780
        this.canvas.height = 435
        this.canvasWidth = 780
        this.canvasHeight = 435
        this.backgroundImg.width = 780
        this.backgroundImg.height = 435
      }
      this.ctx = this.canvas.getContext('2d')
      // 创建背景，图标，移动图标
      this.loadBgImg()
      // 刷新画布
      this.dataRefreh()
    },
    //加载背景图片
    loadBgImg() {
      let img = new Image()
      let bgImg = this.backgroundImg
      img.src = bgImg.url
      // console.log(this.valueUrl);
      //绘制所有图片
      img.onload = () => {
        this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
        this.ctx.drawImage(
          img,
          bgImg.x,
          bgImg.y,
          bgImg.width * this.imgScale,
          bgImg.height * this.imgScale
        )
        this.loadSensorImg()
        this.drawCanvasSensorImg()
      }
    },
    //加载图标
    loadSensorImg() {
      let imgList = []
      for (let i = 0; i < this.sensorImgList.length; i++) {
        let img = new Image()
        let sensorImg = this.sensorImgList[i]
        img.src = sensorImg.url
        let imgs = {}
        imgs.img = img
        imgs.x = sensorImg.x
        imgs.y = sensorImg.y
        imgs.width = sensorImg.width
        imgs.height = sensorImg.height
        console.log(imgs)
        imgList.push(imgs)
      }

      this.drawImg(imgList)
    },
    //绘制图片方法
    drawImg(imgList) {
      //清空画布中的图片
      for (let i = 0; i < imgList.length; i++) {
        this.ctx.drawImage(
          imgList[i].img, //规定要使用的图片
          imgList[i].x,
          imgList[i].y, //在画布上放置图像的 x 、y坐标位置。
          imgList[i].width,
          imgList[i].height //要使用的图像的宽度、高度
        )
      }
    },
    // 绘制移动的图片
    drawCanvasSensorImg() {
      let imgList = []
      for (let i = 0; i < this.canvasSensorImg.length; i++) {
        let img = new Image()
        let sensorImg = this.canvasSensorImg[i]
        img.src = sensorImg.url
        let imgs = {}
        imgs.img = img
        imgs.x = sensorImg.x
        imgs.y = sensorImg.y
        imgs.width = sensorImg.width
        imgs.height = sensorImg.height
        imgList.push(imgs)
      }
      this.drawImg(imgList)
    },
    //判断鼠标是否在图标范围内,并返回下标
    isMouseInIcon(e, imgList) {
      let x = e.x - this.canvas.getBoundingClientRect().x
      let y = e.y - this.canvas.getBoundingClientRect().y
      for (let i = 0; i < imgList.length; i++) {
        let imgX = imgList[i].x
        let imgY = imgList[i].y
        let imgWidth = imgList[i].width
        let imgHeight = imgList[i].height
        if (
          x > imgX &&
          x < imgX + imgWidth &&
          y > imgY &&
          y < imgY + imgHeight
        ) {
          return i
        }
      }
      return -1
    },
    //设置鼠标样式
    settingMouse(mouse) {
      let body = document.querySelector('body')
      body.style.cursor = mouse
    },
    // 定时器刷新画布
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        console.log('qin')
        this.loadBgImg()
      }, this.frameNumber)
    },
    //鼠标点击触发事件
    canvasMouseDown(e) {
      this.isClick = true
      let x = e.pageX - this.canvas.getBoundingClientRect().x
      let y = e.pageY - this.canvas.getBoundingClientRect().y
      //先判断鼠标是否在需要移动的图标中，再判断是否在固定图标中
      this.index = this.isMouseInIcon(e, this.canvasSensorImg)
      if (this.index != -1) {
        return
      }
      //在固定图标中则复制
      // let mouseIndex = this.isMouseInIcon(e, this.sensorImgList)
      // if (mouseIndex != -1) {
      //   let obj = {}
      //   obj.url = this.sensorImgList[mouseIndex].url
      //   obj.height = this.sensorImgList[mouseIndex].height
      //   obj.width = this.sensorImgList[mouseIndex].width
      //   obj.x = this.sensorImgList[mouseIndex].x
      //   obj.y = this.sensorImgList[mouseIndex].y
      //   this.canvasSensorImg.push(obj)
      //   this.index = this.isMouseInIcon(e, this.canvasSensorImg)
      // }
    },
    //鼠标移动触发事件
    canvasMouseMove(e) {
      // console.log('移动了')
      let inIndex = this.isMouseInIcon(e, this.canvasSensorImg)
      let mouseIndex = this.isMouseInIcon(e, this.sensorImgList)
      // console.log(inIndex)
      // console.log(mouseIndex)
      if (inIndex != -1 || mouseIndex != -1) {
        this.settingMouse('pointer')
      } else {
        this.settingMouse('default')
      }
      //如果未点击则不触发该事件

      if (!this.isClick) {
        return
      }
      //index为-1则点击中的为图标
      if (this.index != -1) {
        console.log('我是图标')
        let x = e.pageX - this.canvas.getBoundingClientRect().x
        let y = e.pageY - this.canvas.getBoundingClientRect().y
        //改变图标canvasSensorImg[this.index]的坐标并重新渲染
        // this.canvasSensorImg[this.index].x =
        //   x - this.canvasSensorImg[this.index].width / 2
        this.canvasSensorImg[this.index].x =
          this.canvasSensorImg[this.index].x < 0
            ? 0
            : x - this.canvasSensorImg[this.index].width / 2
        this.canvasSensorImg[this.index].y =
          this.canvasSensorImg[this.index].y < 0
            ? 0
            : y - this.canvasSensorImg[this.index].height / 2 <
              this.canvasHeight
            ? y - this.canvasSensorImg[this.index].height / 2
            : this.canvasHeight - this.canvasSensorImg[this.index].height
      }

      //index为-1则点中的为背景图片，且图片的缩放比例要大于等于一则可以拖动图片
      if (this.index == -1 && this.imgScale > 1) {
        console.log('ahsdkah')
        this.settingMouse('pointer')
        console.log('1')
        let movementX = e.movementX
        let movementY = e.movementY
        console.log('2')
        console.log(movementX)
        console.log(this.backgroundImg.x)
        if (movementX > 0 && this.backgroundImg.x < 0) {
          this.backgroundImg.x = this.backgroundImg.x + this.imgMove
          console.log('3')
        } else if (
          movementX < 0 &&
          this.backgroundImg.x + this.backgroundImg.width * this.imgScale >
            this.canvasWidth
        ) {
          console.log('4')
          this.backgroundImg.x = this.backgroundImg.x - this.imgMove
        }
        if (movementY > 0 && this.backgroundImg.y < 0) {
          this.backgroundImg.y = this.backgroundImg.y + this.imgMove
        } else if (
          movementY < 0 &&
          this.backgroundImg.y + this.backgroundImg.height * this.imgScale >
            this.canvasHeight
        ) {
          console.log('5')
          this.backgroundImg.y = this.backgroundImg.y - this.imgMove
        }
      }
    },
    //鼠标抬起触发事件
    canvasMouseUp(e) {
      this.isClick = false
      this.index = -1
      //将鼠标样式还原
      this.settingMouse('default')
    },
    //滚轮滑动事件
    canvasMouseWhell(e) {
      let deltaY = e.deltaY
      console.log(e)
      if (deltaY < 0) {
        this.imgScale = this.imgScale + 0.1
      } else {
        if (this.imgScale <= 1.0) {
          this.backgroundImg.x = 0
          this.backgroundImg.y = 0
          return
        }
        this.imgScale = this.imgScale - 0.1
      }
    },
    //传感器添加点位操作
    handleClick(row) {
      if (this.vessel) {
        console.log('传感器id', row)
        // let img = new Image()
        let imgs = {}
        imgs.url = this.xue
        imgs.x = 0
        imgs.y = 0
        imgs.width = 46
        imgs.height = 46
        // imgs.rows = row
        imgs.channelId = row.id
        console.log('传感器图标数据', imgs)
        this.canvasSensorImg.push(imgs)
        this.sensorshow.push(row.id)
        console.log('控制显示', this.sensorshow)
        let x = this.tableData.indexOf(row)
        console.log(x)
        // delete this.tableData[x]
        this.tableData.splice(x, 1)
        console.log(this.tableData)
        this.$message.success('请拖动图标到指定点位')
      } else {
        this.$message.success('请先点击保存,在点击传感器')
      }
    },
    // 添加点位
    addPT() {
      if (this.vessel) {
        let imgs = {}
        imgs.url = this.xue
        imgs.x = 0
        imgs.y = 0
        imgs.width = 46
        imgs.height = 46
        console.log('点位', imgs)
        this.canvasSensorImg.push(imgs)
        this.$message.success('请拖动图标到指定点位')
      } else {
        this.$message.success('请先点击保存,在点击传感器')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.canvascont {
  width: 100%;
  height: 800px;
  background-color: #fff;
  .search {
    margin-bottom: 10px;
  }
  .left {
    padding: 30px;
    height: 800px;
    padding-top: 40px;
    background-color: #fff;
    background-color: #072a4f;
    border-right: 1px solid #2485ab;
    ::v-deep .el-input__inner {
      border: 1px solid #1997c9;
      border-radius: 0;
      color: #fff;
      background-color: #072a4f;
    }
    ::v-deep .el-tree-node.is-current > .el-tree-node__content {
      // 设置颜色 el-tree 选中节点的颜色
      background-color: rgba(135, 206, 235, 0.2);
      color: #409eff; // 节点的字体颜色
      font-weight: bold; // 字体加粗
    }
    ::v-deep .el-tree-node__content:hover {
      background-color: #66b1ff87;
    }
    ::v-deep .el-tree {
      background-color: #072a4f;
      color: #fff;
    }
  }
  .right {
    padding: 30px;
    height: 800px;
    padding-top: 28px 40px 40px 40px;
    background-color: #fff;
    background-color: #072a4f;
    border-left: 1px solid #2485ab;
    border-right: 1px solid #2485ab;
    position: relative;
    .alert-box-item {
      width: 650px;
      height: 250px;
      border: dashed 1px #ccc;
      //   background-color: skyblue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -60%);
      padding: 20px 0;
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      justify-content: center;
    }

    .bigImg-div {
      width: 100px;
      height: 100px;
      //   border-radius: 100%;
      overflow: hidden;
      border: 1px solid #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        font-size: 30px;
        color: #ccc;
      }
      &:hover {
        border-color: #409eff;
        cursor: pointer;
        i {
          color: rgb(126, 124, 124);
        }
      }
    }

    .bigImg {
      display: block;
      width: 1000px;
      height: 490px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -54%);
    }
    .top {
      display: flex;
      align-items: center;
      // background-color: skyblue;
      i {
        display: block;
        width: 3px;
        height: 19px;
        background-color: black;
        background-color: #f3ae0c;
        border-radius: 2px;
        margin-right: 5px;
      }
      p {
        font-size: 17px;
        font-weight: 700;
        color: rgb(63, 64, 65);
        color: #fff;
      }
    }
    .txt {
      font-family: '楷体', '楷体_GB2312';
      //   font-family: "黑体";
      color: rgba(0, 0, 0, 0.45);
      color: #fff;
      font-size: 16px;
      i {
        color: #e24720;
        font-style: normal;
      }
    }
    .bottom {
      width: 95%;
      height: 100px;
      border-top: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-color: skyblue;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
    }
    .cass {
      width: 1000px;
      height: 620px;
      padding: 10px;
      background-color: #313c44;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -45%);

      .operation {
        height: 50px;
        margin-bottom: 2px;
        display: flex;
        justify-content: space-between;
        .zuo {
          width: 500px;
          // background-color: skyblue;
          line-height: 60px;
          margin-left: 10px;
          font-weight: 700;
          color: #2b6de5;
          font-size: 16px;
          font-family: '楷体', '楷体_GB2312';
          i {
            font-style: normal;
            color: black;
            font-size: 20px;
          }
        }
        .you {
          width: 210px;
          // background-color: #ccc;
          line-height: 50px;
          i {
            font-size: 19px;
            color: #2b6de5;
            margin-right: 20px;
          }
          ::v-deep .el-button {
            font-size: 17px;
          }
        }
      }
    }
  }
  .table {
    height: 800px;
    padding: 30px 5px 0;
    background-color: #fff;
    background-color: #072a4f;
    border-left: 1px solid #2485ab;
    ::v-deep .el-image {
      // background-color: skyblue;
      width: 33px !important;
      height: 33px !important;
      margin: 0 0 -7px 0 !important;
    }
    .top {
      display: flex;
      align-items: center;
      // background-color: skyblue;
      i {
        display: block;
        width: 4px;
        height: 19px;
        background-color: #409eff;
        // border-radius: 2px;
        margin-right: 5px;
      }
      p {
        font-size: 17px;
        font-weight: 700;
        color: rgb(36, 37, 37);
        color: #fff;
      }
    }
    ::v-deep .el-table {
      background-color: #072a4f !important;
      tr {
        th {
          color: #f3ae0c;
          background-color: #072a4f;
        }
        td {
          background-color: #072a4f;
          // border: 1px solid red;
          color: #fff;
          cursor: pointer;
        }
      }
    }
    // ::v-deep .el-table,
    // .el-table__expanded-cell {
    //   background-color: #072a4f;
    // }
    // 表格标题
    // ::v-deep .el-table tr {
    //   th {
    //     color: #f3ae0c;
    //     background-color: #072a4f;
    //   }
    // }
    // // 表格选项
    // ::v-deep .el-table tr {
    //   td {
    //     background-color: #072a4f;
    //     // border: 1px solid red;
    //     color: #fff;
    //   }
    // }
  }
}
</style>